<style lang="scss" scoped>
// 样式加私有化
    .todoList{
        width: 100vw;
        height: 100vh;
        background-image: linear-gradient(to right,rgb(254,181,179),rgb(252,195,156));
        // 弹性布局
        display: flex;
        justify-content: center;
        align-items: center;
        .tab{
            width: 540px;
            box-sizing: border-box;
            padding: 15px;
            border-radius: 15px;
            background-color: #fff;
            .title{
                display: flex;
                justify-content: center;
                align-items: center;
                img{
                    height: 70px;
                }
                span{
                    display: inline-block;
                    padding: 10px 15px;
                    background-color: rgb(255,127,80);
                    color: #fff;
                    border-radius: 10% 13px 20%;
                    transform: rotate(5deg);
                }
            }
            .detail{
                height: 50px;
                line-height: 70px;
                font-weight: bold;
                text-align: center;
                font-size: 20px;
            }
            .userInput{
                margin-top: 15px;
                height: 50px;
                text-align: center;
                input{
                    border: 0;
                    outline: 0;
                    width: 240px;
                    height: 35px;
                    line-height: 35px;
                    border-bottom: 3px dashed rgb(255,127,80);
                }
                button{
                    width: 65px;
                    background-color: rgb(255,233,253);
                    padding: 5px;
                    border-radius: 7px;
                    border: 1px solid #333;
                    transform: rotate(10deg);
                    cursor: pointer;
                    &:active{
                        transform: rotate(0);
                    }
                }
            }
            .list{
                width: 400px;
                margin-left: 55px;
            }
            .cmd{
                height: 45px;
                line-height: 45px;
                text-align: right;
                span{
                    margin-right: 10px;
                    font-size: 18px;
                    user-select: none;
                    cursor: pointer;
                }
            }
        }
    }
</style>
<template>
    <!-- 
        分析：
            样式 > 
            数据结构(谁和谁是一个整体) > 
            先有数据(方便调试) > 
            调试功能;
     -->
    <div class="todoList">
        <div class="tab">
            <div class="title">
                <img src="../../../assets/logo.svg" alt="">
                <span>
                    To-Do-List
                </span>
            </div>
            <div class="detail">
                ~ Today I need to ~
            </div>
            <div class="userInput">
                <input type="text" 
                :value="text" 
                @keyup="$emit('keyup',$event.target.value)"> 
                <button @click="$emit('submit')">
                    Submit
                </button>
            </div>
            <div class="list">
                <slot></slot>
            </div>
            <div class="cmd">
                <span @click="$emit('changeStatus','all')">
                    all
                </span>
                <span @click="$emit('changeStatus','active')">
                    Active
                </span>
                <span @click="$emit('changeStatus','completed')">
                    ComPleted
                </span>
                <span @click="$emit('clear')">
                    clearBoth
                </span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        text: [String,Number]
    },
    model: {
        prop: 'text',
        event: 'keyup'
    }
}
</script>